<template>
	<view class="mian">
		<!-- #ifdef MP-WEIXIN -->
		<navbar :bgColor="bgColor" :btnColors='btnColor' title="兑换商品" :isGoBack="true" :isNotice="true" :visible="true"  ></navbar>
		<!-- #endif -->
		<view class="mian-content">
			<view class="flex pb-20 search-main justify-between">
			   <view class="search-bar-box">
					<u-icon name="search" class="icon-search_in-box" size="25"></u-icon> 
					<input type="text" class="search-bar-input bg-white" placeholder="请输入关键字" v-model="search" @input="inputChange"/>
			   </view>			
			</view>
			 
			 <view class="points_mian mt-20 ml-20 mr-20">
					<view class="flex justify-between mr-10 ml-5" style="color: #999999;;">
						<view class="tab-item" :class="currentAll == 1 ? 'active' : ''" @click="select_class(1)">综合</view>
						<view class="tab-item"  :class="currentAll == 2 ? 'active' : ''" @click="select_class(2)">
						    <text data-currentall="2">我能兑换</text>						   
					   </view>    
					   <view class="tab-item"  :class="currentAll == 3 ? 'active' : ''" @click="select_class(3)">
						    <text data-currentall="2">默认排序</text>
					    </view>  
						<view class="tab-item"  :class="currentAll == 4 ? 'active' : ''" @click="select_class(4)">
							<text >积分排序</text>
							<view class="screen-item-icon">
								<image :src="stock_sale=='asc'?'../../../static/resource/top-black.png':'../../../static/resource/top-gray.png'" class="screen-item-icon-img" ></image>
								<image :src="stock_sale=='asc'?'../../../static/resource/bottom-gray.png':'../../../static/resource/bottom-black.png'" class="screen-item-icon-img" style="margin-top:5rpx;"></image>
								
							</view>
						 </view> 
					</view>								
			 	   <view class="goods_list">
			 		<view class=" flex flex-wrap" >                  
			 			<block v-for="(item,index) in list" :key="index">
			 				<view class="classify-cell-recom bg-white" @click="goDetails(item.id)">		
			 					<view class="doll_image">
			 						<image class="grid-img-recom" :src="item.goods_image"  mode="scaleToFill"></image>
			 					</view>	
			 					<view class="cate-zt flex flex-direction mt-10" >
			 						<view class="pl-20 pr-15 productNameText">{{item.goods_title}}</view>			 				            
			 					</view> 
			 					<view class="flex justify-between mt-20 align-center text-center mb-15 mr-10" >
			 						<view class="pl-20 pr-15">
			 							<span>积分</span>
			 							<span style="color: red;">{{item.goods_points}}</span>
			 						</view>	
			 						<view class="points_change">
			 							兑换
			 						</view>								
			 					</view> 					
			 	  			</view>
			 	  	    </block>  			 								  
			 		</view> 
			 	</view>
			 </view>		 
		</view>		
	</view>
</template>

<script>

	export default {
		data() {
			return {
				...getApp().globalData.config,
				visible:false,
				currentAll:1,
				stock_sale:'asc',
				page:1,
				list:[],
				search:''
				
			}
		},
		onLoad(events) {
			if(events.recommId){
				this.recommendId=events.recommId
			}			
		},
		onShow(){
			this.page=1
			this.list=[]
			this.query_goods_list()
		},
		methods: {
			//搜索
			inputChange(){
				this.page=1
				this.list=[]
				 this.query_goods_list()
			},
			//切换
			select_class(event){
				this.page=1
				this.list=[]
				this.currentAll=event
				if(event==4){
					let stock_sale=this.stock_sale
					if(stock_sale=='asc'){
						this.stock_sale='desc'
					}else this.stock_sale='asc'
				}
			    this.query_goods_list()
			},
			//获取信息
			query_goods_list(){
				console.log('ok')
				let obj={
					currentAll:this.currentAll,
					stock_sale:this.stock_sale,
					token:uni.getStorageSync('userInfo').token,
					page:this.page,
					search:this.search
				}
				this.$http.pointsList(obj).then(res=>{
					if(res.resCode=='9999'){
						this.list = [...this.list, ...res.data.lists]
					}
				})
			},
			onReachBottom() {
				console.log("到底了")
				this.page++; // 每触底一次 page +1
				this.query_goods_list()
			},
			//详情
			goDetails(id){
				this.$routers.router('/pages/pagesuser/points/detail?id='+id,'navigateTo') 
			}
			
		},
		
	}
</script>

<style>
   page{
	   background-color: #fff;
   }
   .active{
	   font-weight: bold;
	   color: #4A7E89 ;
   }
   
  .screen-item-icon{
    display: inline-block;
    top: 82%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-10%);
    overflow: hidden;
    margin-left: 7rpx;
  }
  
  .screen-item-icon-img{
    width: 16rpx;
    height: 8rpx;
    display: block;
  }
   .search-main{/* 
   	position: absolute; */
   	top: 180rpx;
   }
   
   .search-bar-box {
     display: flex;
     align-items: center;
     position: relative;
     margin-top: 30rpx;
     margin-left:20rpx ;
     margin-right: 20rpx;
     padding-left: 50rpx;
     padding-right: 50rpx;
    /* width: 100%; */
     box-sizing: border-box;
     z-index: 1;
     background:#F7F7F7;;
     border-radius: 40rpx;
     width: 100%;
   }
   
   
   .icon-search_in-box {
     position: absolute;
     left: 20rpx;
   }
   
   .icon-search-clear {
     position: absolute;
     right: 20rpx;
     margin-left: 10rpx;
     top: 18rpx;
   }
   
   .icon-search {
     margin-right: 20rpx;
     margin-top: 20rpx;
   }
   
   .search-bar-text {
     display: inline-block;
     font-size: 26rpx;
     margin-bottom: 20rpx;
     vertical-align: middle;
   }
   
   .search-bar-label {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 2;
     border-radius: 10rpx;
     text-align: center;
     color: #ccc;
     background: #fff;
     line-height: 50rpx;
   }
   
   .search-bar-input {
     height: 75rpx;
     line-height: 60rpx;
     font-size: 26rpx;
     margin: 0 10rpx;
     width: 100%;
     margin-left: 20rpx;
         background: rgb(241 245 248 / 3%);
   }
   .points_top{
   	background: #fff;
   	padding-bottom: 30rpx;
   }
   .points{
   	display: flex;
   	flex-direction: column;
   	margin-left: 20rpx;
   	margin-right: 20rpx;
   	align-content: center;
   	text-align: center;
   	width: 700rpx;
   	height: 344rpx;
   	padding-top: 30rpx;
   	background: linear-gradient( 180deg, #518FA0 0%, #92BBC2 100%);
   	border-radius: 20rpx 20rpx 20rpx 20rpx;
   	
   }
   
   .points_text{
   	margin-top: 38rpx;
   	font-weight: bold;
   	font-size: 38rpx;
   	color: #92BBC2;
   	line-height: 30rpx;
   	text-align: center;
   }
   
   .points_val{
   	
   	
   	margin-top: 48rpx;
   	font-weight: 600;
   	font-size: 80rpx;
   	color: #94BAC3;
   	line-height: 30rpx;
   }
   
   .points_goods{
   	display: flex;
   	flex-direction: row;
   	justify-content: center;
   	align-items: center;
   	text-align: center;
   	color: #fff;
   	margin-top: 38rpx;
   }
   
   .points_goods_one{
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	text-align: center;
   	margin: 15rpx;
   	width: 185rpx;
   	height: 77rpx;
   	background: #4C7D8B;
   	border-radius: 100rpx 100rpx 100rpx 100rpx;
   }
   
   .points_mian{
   	display: flex;
   	flex-direction: column;
   	margin-top: 20rpx;
   	background-color: #fff;
   	padding-left: 20rpx;
   }
   .grid-img-recom{
   		width: 288rpx;
   		height: 242rpx;
   	}
   	.doll_image{
   		margin-top: 20rpx;
   		margin-bottom: 0rpx;
   		display: flex;
   		flex-direction: row;
   		justify-content: center;
   		align-items: center;
   		text-align: center;
   	}
      .service_title{
   		font-weight: bold;
   		font-size: 30rpx;
   		color: #000000;
   		padding-left: 10rpx;
   	}
   	.productNameText{
   		margin-top: 10rpx;
   		color:rgb(32,27,27);
   		font-size:28rpx;
   		font-weight: 600;
   		text-overflow:ellipsis;
   		display:-webkit-box;
   		word-break:break-all;
   		-webkit-box-orient:vertical;
   		-webkit-line-clamp:1;overflow:hidden;
   	}
   
   	.productNameT{display:-webkit-box;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;}
   	
   	.classify-cell-recom{
   		display: flex;
   		flex-direction: column;
   		justify-content: center;
   		/* align-items: center; */
   		width: 45%;
   		margin: 20rpx 10rpx 0rpx 20rpx;	  
   		box-shadow: 0rpx 8rpx 6rpx 1rpx rgba(91,91,91,0.06);
   		border-radius: 20rpx 20rpx 20rpx 20rpx;
   		border: 1rpx solid #D4D4D4;
   	}
   
   .goods_list{
   	  display: flex;
   	  flex-direction: column;
   	  height: 100%;
   	  margin-top: 5rpx;
   	  position: relative;
   	  padding-bottom: 60rpx;
   	}
   	
   	.points_change{
   		display: flex;
   		justify-content: center;
   		align-items: center;
   		text-align: center;
   		margin: 5rpx;
   		width: 112rpx;
   		height: 60rpx;
   		background: #4A7E89;
   		font-size: 26rpx;
   		border-radius: 100rpx 100rpx 100rpx 100rpx;
   		color: #fff;
   	}
</style>